<template>
    <div>
        <Button type="primary" @click="info">Display info prompt</Button>
        <Button @click="success">Display success prompt</Button>
        <Button @click="warning">Display warning prompt</Button>
        <Button @click="error">Display error prompt</Button>
        <Button @click="loading">Display loading...</Button>
        <Button @click="closable">Display a closable message</Button>
        <Button @click="updatable">Display a updatable message</Button>
    </div>
</template>
<script>
    export default {
        methods: {
            info () {
                this.$Message.info({
                    content: '这是一条普通的提示',
                    duration: 1000
                });
            },
            success () {
                this.$Message.success('This is a success tip');
            },
            warning () {
                this.$Message.warning('This is a warning tip');
            },
            error () {
                this.$Message.error('This is an error tip');
            },
            loading () {
                const msg = this.$Message.loading({
                    content: 'Loading...',
                    duration: 0
                });
                setTimeout(msg, 3000);
            },
            closable () {
                this.$Message.info({
                    content: 'Tips for manual closing',
                    duration: 1000,
                    closable: true
                });
            },
            updatable () {
                let message = this.$Message.success({content: 'This is a update tip', duration: 0, updatable: true});
                console.log('hello world')
                let i = 0;
                let interval = setInterval(function() {
                    if(i == 5) {
                        clearInterval(interval);
                        message.update('UPDATE COLOSE', 'success', 1.5);
                    } else {
                        message.update('UPDATE '+ i++ + ' :'+ new Date().toString());
                    }
                }, 1000)
            }
        }
    }
</script>
